<template>
  <div>
    <h2>土壤pH热力图</h2>
    
    <el-row :gutter="20" class="mb-4">
      <el-col :span="8">
        <el-date-picker
          v-model="selectedDate"
          type="date"
          placeholder="选择日期"
          :disabled-date="disabledDate"
        />
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="refreshHeatmap">刷新热力图</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>地块pH值分布热力图</span>
          </template>
          <div id="heatmap-container" style="height: 500px; position: relative;">
            <v-chart :option="heatmapOption" style="height: 100%; width: 100%" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>pH值统计</span>
          </template>
          <el-table :data="phStatistics" style="width: 100%">
            <el-table-column prop="range" label="pH范围" />
            <el-table-column prop="count" label="地块数量" />
            <el-table-column prop="percentage" label="占比" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>地块详情</span>
          </template>
          <el-table :data="plotDetails" style="width: 100%">
            <el-table-column prop="plot_id" label="地块ID" />
            <el-table-column prop="ph" label="pH值" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.ph)">{{ getStatusText(row.ph) }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getPhHeatmapData } from '../api/dashboard'

const selectedDate = ref(new Date())
const heatmapOption = ref({
  title: {
    text: '土壤pH值分布热力图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      return `地块: ${params.data.plot_id}<br/>pH值: ${params.data.ph}<br/>位置: ${params.data.lat}, ${params.data.lng}`
    }
  },
  visualMap: {
    min: 4,
    max: 9,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '5%',
    inRange: {
      color: ['#d94e5d', '#eac736', '#50a3ba']
    }
  },
  geo: {
    map: 'china',
    roam: true,
    emphasis: {
      itemStyle: {
        areaColor: '#eee'
      }
    }
  },
  series: [{
    type: 'scatter',
    coordinateSystem: 'geo',
    data: [],
    symbolSize: 20,
    emphasis: {
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      }
    }
  }]
})

const phStatistics = ref([
  { range: '4.0-5.5', count: 2, percentage: '4.4%' },
  { range: '5.5-6.5', count: 8, percentage: '17.8%' },
  { range: '6.5-7.5', count: 28, percentage: '62.2%' },
  { range: '7.5-9.0', count: 7, percentage: '15.6%' }
])

const plotDetails = ref([])

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}

const getStatusType = (ph) => {
  if (ph < 5.5) return 'danger'
  if (ph < 6.5) return 'warning'
  if (ph <= 7.5) return 'success'
  return 'info'
}

const getStatusText = (ph) => {
  if (ph < 5.5) return '酸性过强'
  if (ph < 6.5) return '弱酸性'
  if (ph <= 7.5) return '中性'
  return '弱碱性'
}

const refreshHeatmap = async () => {
  try {
    const response = await getPhHeatmapData()
    const heatmapData = response.data.map(item => ({
      name: item.plot_id,
      value: [item.lng, item.lat, item.ph],
      ...item
    }))
    
    heatmapOption.value.series[0].data = heatmapData
    plotDetails.value = response.data.map(item => ({
      plot_id: item.plot_id,
      ph: item.ph,
      lat: item.lat,
      lng: item.lng
    }))
  } catch (error) {
    console.error('获取热力图数据失败:', error)
  }
}

onMounted(() => {
  refreshHeatmap()
})
</script>
